import { View } from "@tarojs/components";
import React, { Component } from "@tarojs/taro";
import Echarts from '../components/Echarts'

// 地图
export default class RegionalStatistics extends Component{
  

    setChartOptions(chart) { 
  let option = {

    tooltip: {

      trigger: 'item',

      showDelay: 0,

      transitionDuration: 0.2,

      formatter: function (params) {

        let value;

        if (params.value) {

          value = (params.value + '').split('.');

        } else {

          value = '0';

        }

        value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');

        return params.seriesName + '\n' + params.name + ': ' + value;

      }

    },

    visualMap: {

      top: 'middle',

      left: '6%',

      pieces: [

        {min: max * 0.8}, // 不指定 max，表示 max 为无限大（Infinity）。

        {min: max * 0.6, max: max * 0.8},

        {min: max * 0.4, max: max * 0.6},

        {min: max * 0.2, max: max * 0.4},

        {max: max * 0.2}

      ],

      color: ['#d94e5d', '#eac736', '#50a3ba'],

      showLabel: false,

      textStyle: {

        color: '#fff'

      }

    },


    series: [

      {

        name: '地域统计',
        type: 'map',
        roam: false,
        map: 'china',
        left: '20%',
        emphasis: {
          label: {show: true},
        },
        itemStyle: {
          borderColor: '#fff',
        },
    // 文本位置修正
        textFixed: {
          Alaska: [20, -20]

        },
        data: data
      }

    ]

  };
  chart.setOption(option);

    }
    render() {
        const height = Taro.pxTransform(500);
        return (
            <View >
                <View className='caption '>
                    地域统计
                </View>
                <Echarts setChartOptions={this.setChartOptions.bind(this)} height={height}/>
            </View>
        )
    }
}